const CracoLessPlugin = require('craco-less');
const CracoAntDesignPlugin = require('craco-antd');
const path = require('path');
const AntdThemeWebpackPlugin = require('antd-theme-webpack-plugin');
const WebpackVariableReplacer = require('stylesheet-replacer-webpack-plugin');
const { getThemeVariables } = require('antd/dist/theme');
const resolve = dir => path.resolve(__dirname, dir);
const env = 'development';
const themeOptions = {
    theme: [
        {
            key: 'dark',
            fileName: 'dark.css',
            theme: 'dark'
        },
        {
            key: 'dust',
            fileName: 'dust.css',
            modifyVars: {
                '@primary-color': '#F5222D',
            },
        },
        {
            key: 'volcano',
            fileName: 'volcano.css',
            modifyVars: {
                '@primary-color': '#FA541C',
            },
        },
        {
            key: 'sunset',
            fileName: 'sunset.css',
            modifyVars: {
                '@primary-color': '#FAAD14',
            },
        },
        {
            key: 'cyan',
            fileName: 'cyan.css',
            modifyVars: {
                '@primary-color': '#13C2C2',
            },
        },
        {
            key: 'green',
            fileName: 'green.css',
            modifyVars: {
                '@primary-color': '#52C41A',
            },
        },
        {
            key: 'geekblue',
            fileName: 'geekblue.css',
            modifyVars: {
                '@primary-color': '#2F54EB',
            },
        },
        {
            key: 'purple',
            fileName: 'purple.css',
            modifyVars: {
                '@primary-color': '#722ED1',
            },
        },
        {
            key: 'dust',
            theme: 'dark',
            fileName: 'dark-dust.css',
            modifyVars: {
                '@primary-color': '#F5222D',
            },
        },
        {
            key: 'volcano',
            theme: 'dark',
            fileName: 'dark-volcano.css',
            modifyVars: {
                '@primary-color': '#FA541C',
            },
        },
        {
            key: 'sunset',
            theme: 'dark',
            fileName: 'dark-sunset.css',
            modifyVars: {
                '@primary-color': '#FAAD14',
            },
        },
        {
            key: 'cyan',
            theme: 'dark',
            fileName: 'dark-cyan.css',
            modifyVars: {
                '@primary-color': '#13C2C2',
            },
        },
        {
            key: 'green',
            theme: 'dark',
            fileName: 'dark-green.css',
            modifyVars: {
                '@primary-color': '#52C41A',
            },
        },
        {
            key: 'geekblue',
            theme: 'dark',
            fileName: 'dark-geekblue.css',
            modifyVars: {
                '@primary-color': '#2F54EB',
            },
        },
        {
            key: 'purple',
            theme: 'dark',
            fileName: 'dark-purple.css',
            modifyVars: {
                '@primary-color': '#722ED1',
            },
        },
    ],
};
const currentTheme = 'dust'
let modifyVars = {}
const item = themeOptions.theme.find(item => item.fileName === `${currentTheme}.css`);
if (item && item.modifyVars) {
    modifyVars = item.modifyVars
}
modifyVars = {
    ...getThemeVariables({
        dark: false, // 开启暗黑模式
        compact: false,//开启紧凑模式
    }),
    ...modifyVars
}

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    sourceMap: env === 'development' ? true : false,
                    lessOptions: {
                        modifyVars,
                        javascriptEnabled: true,
                        sourceMap: env === 'development' ? true : false
                    },
                },
                modifyLessRule: function (lessRule, context) {
                    return {
                        test: /\.module\.less$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: 'style-loader'
                            },
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: {
                                        localIdentName: '[local]_[hash:base64:6]',
                                    },
                                },
                            },
                            {
                                loader: 'less-loader',
                                options: {
                                    lessOptions: {
                                        //modifyVars,
                                        javascriptEnabled: true,
                                        sourceMap: env === 'development' ? true : false
                                    },
                                    sourceMap: env === 'development' ? true : false
                                }
                            },
                        ],
                    }
                },
            },
        },
        {
            plugin: CracoAntDesignPlugin,
            options: {
                //customizeThemeLessPath: resolve('src/assets/style/antd.customize.less')
                customizeTheme: modifyVars
            },
        }
    ],
    webpack: {
        alias: {
            'src': resolve('src'),
        },
        plugins: {
            add: [
                new AntdThemeWebpackPlugin(themeOptions)
            ],
        },
        configure: (webpackConfig, { env, paths }) => {
            // webpackConfig.plugins.push(new AntdThemeWebpackPlugin())
            //一定要放到最后才能找到index.html文件
            if (env === 'development') {
                console.log(env, 'development环境暂不支持切换主题')
            } else {
                webpackConfig.plugins.push(new WebpackVariableReplacer({
                    htmlFileName: 'index.html',
                    publicPath: webpackConfig.output.publicPath,
                    matchVariables: {
                        main: '#f53c32',
                        mainHover: '#ff695c',
                    }
                }))
            }
            return webpackConfig;
        }
    }
};